<template>
  <div class="readOver">
    <div v-if="component" v-loading="loading" class="component" :style="isComment === true ? 'width:70%;': 'width:100%;'">
      <div class="overflow">
        <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
        <component :is="msgFormPath" v-if="!taskCc" ref="msgFormPath" />
        <ProcessInfoForm v-if="taskCc" ref="processInfoForm" />
      </div>
      <div style="text-align: right;padding: 15px;">
        <el-button size="mini" @click="cancel">{{ $t('取消') }}</el-button>
        <el-button type="primary" size="mini" @click="doPrint">{{ $t('打印') }}</el-button>
      </div>
    </div>
    <div id="print" ref="print" style="display:none;">
      <div>
        <component :is="msgFormPath" v-if="!taskCc" ref="msgFormView" />
        <ProcessInfoForm v-if="taskCc" ref="processInfoView" />
      </div>
    </div>
    <div v-if="isComment" v-loading="msgLoading" class="comments">
      <div v-if="commentList && commentList.length > 0" class="comList">
        <div style="font-size: 12px;text-align: center;"><i v-for="v in userNames" :key="v"> {{ v }} ,</i></div>
        <div v-for="(v) in commentList" :key="v.id" :class="v.createBy && v.createBy.nickName === $store.getters.name ? 'box right-box' : 'box left-box'">
          <el-image v-if="v.avatar" class="img-box" :src="v.avatar" fit="fill" />
          <span v-else class="img-box noUser" />
          <div class="content">
            <p class="time">
              <span>{{ parseTime(v.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </p>
            <h4 v-if="v.createBy && v.createBy.nickName">{{ v.createBy.nickName }}</h4>
            <h4 v-else>{{ $t('系统通知') }}</h4>
            <h3 v-if="v.content" class="msgComment">
              <span class="cont" v-html="v.content" />
            </h3>
          </div>
        </div>
      </div>
      <div>
        <el-input
          v-model="commentFrom.content"
          type="textarea"
          style="margin: 10px;width: calc(100% - 20px);"
          placeholder="..."
        />
        <div class="sendMes">
          <a @click="commentFrom.content = ''">{{ $t('清空') }}</a>
          <a @click="saveData">{{ $t('发送') }}</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getMsgBase,
  saveMsgBase,
  listComment
} from '@/api/system/message/msgBase'
import { getAsyncComponent } from '@/utils'
import ProcessInfoForm from '@/views/act/process/processInfoForm'
export default {
  components: {
    ProcessInfoForm
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 关联数据页面组件
      msgFormPath: '',
      // 遮罩层
      loading: false,
      msgLoading: false,
      component: true,
      // 表单校验
      rules: {},
      // 流程抄送
      taskCc: false,
      commentList: [],
      commentFrom: {
        content: '',
        supId: '',
        component: '',
        primaryId: '',
        type: '',
        title: '',
        userIds: []
      },
      userNames: [],
      isComment: false
    }
  },

  methods: {
    doPrint() {
      if (!this.taskCc) {
        this.$print(this.$refs.print)
      } else {
        this.$refs.processInfoForm.doPrint()
      }
    },
    // 初始化数据
    init(data) {
      this.commentFrom.userIds = data.userIds
      const userList = this.$store.state.user.userList
      if (userList.length > 0 && data.userIds.length > 0) {
        var arr = []
        userList.forEach((user) => {
          data.userIds.forEach((id) => {
            if (id === user.id) {
              arr.push(user.label)
            }
          })
        })
        this.userNames = arr
      }
      if (data.title.indexOf('回复Re：') === -1) {
        this.commentFrom.title = '回复Re：' + data.title
      } else {
        this.commentFrom.title = data.title
      }
      this.commentFrom.primaryId = data.id
      this.commentFrom.type = data.type
      this.loading = true
      if (data != null && data.id !== undefined) {
        getMsgBase(data.id).then((response) => {
          this.form = response.data
          this.component = true
          this.isComment = true
          this.taskCc = false
          if (this.form.dataId !== null && this.form.dataId !== '') {
            if (this.form.component === '@/views/act/process/processInfoForm') {
              this.taskCc = true
              this.$nextTick(() => {
                var proData = {}
                proData.actId = this.form.dataId
                this.$refs.processInfoForm.init(proData)
              })
            } else if (this.form.component === 'oa/reminder/msgReminderSettingForm') {
              this.component = false
            } else if (this.form.component === '@/views/anxin/weekly/anxinWeeklyForm') {
              this.msgFormPath = getAsyncComponent(this.form.component)
              this.loadComponentWeek(this.form.dataId)
            } else if (this.form.component === '@/views/oa/mySchedule/oaMyScheduleForm') {
              console.log('44444')
              this.msgFormPath = getAsyncComponent(this.form.component)
              console.log('msgFormPath', this.msgFormPath)
              console.log('this.form.dataId', this.form.dataId)
              this.loadComponentSchedule(this.form.dataId)
            } else {
              if (this.form.component === '@/views/oa/reminder/msgReminderViewForm') {
                this.isComment = true
              }
              this.importMsgFormPath(this.form.component, this.form.dataId)
            }
          }
          this.getcommentList(data.id)
          this.loading = false
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    // 获取评论 列表
    getcommentList(id) {
      this.msgLoading = true
      const param = {
        id: id
      }
      listComment(param).then((res) => {
        if (res.code === 200) {
          this.commentList = res.data
          this.msgLoading = false
        } else {
          this.commentList = []
          this.msgLoading = false
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        userId: undefined,
        title: undefined,
        content: undefined,
        status: '0',
        component: undefined,
        dataId: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    // 引入流程申请单组件
    importMsgFormPath(msgFormPath, dataId) {
      if (msgFormPath && dataId) {
        this.msgFormPath = getAsyncComponent(msgFormPath)
        this.loadComponent(dataId)
      } else {
        this.msgFormPath = ''
        this.loadComponent()
      }
    },
    // 加载组件
    loadComponent(dataId) {
      this.$bus.$once('async_done', () => {
        this.$nextTick(() => {
          var msgFormData = {}
          msgFormData.id = dataId
          msgFormData.sourcePage = 'msgBase'
          this.$refs.msgFormPath && this.$refs.msgFormPath.init(msgFormData)
          this.$refs.msgFormView && this.$refs.msgFormView.init(msgFormData)
          // 控制按钮是否隐藏
          if (this.$refs.msgFormPath?.isHide !== undefined) {
            this.$refs.msgFormPath.isHide = false
            this.$refs.msgFormView.isHide = false
          }
          if (this.$refs.msgFormPath?.btnHide !== undefined) {
            this.$refs.msgFormPath.btnHide = true
            this.$refs.msgFormView.btnHide = true
          }
          if (this.$refs.msgFormPath?.otherBtnHide !== undefined) {
            this.$refs.msgFormPath.otherBtnHide = true
            this.$refs.msgFormView.otherBtnHide = true
          }
        })
      })
    },
    // 加载组件周会
    loadComponentWeek(dataId) {
      this.$bus.$once('async_done', () => {
        this.$nextTick(() => {
          var msgFormData = {}
          var data = JSON.parse(dataId)
          msgFormData.yearWeek = data.yearWeek
          msgFormData.createBy = data.createBy
          msgFormData.id = '111'
          msgFormData.sourcePage = 'msgBase'
          console.log('555555', msgFormData)
          this.$refs.msgFormPath && this.$refs.msgFormPath.init(msgFormData)
          this.$refs.msgFormView && this.$refs.msgFormView.init(msgFormData)
          // 控制按钮是否隐藏
          if (this.$refs.msgFormPath?.btnHide !== undefined) {
            this.$refs.msgFormPath.btnHide = true
            this.$refs.msgFormView.btnHide = true
          }
          if (this.$refs.msgFormPath?.otherBtnHide !== undefined) {
            this.$refs.msgFormPath.otherBtnHide = true
            this.$refs.msgFormView.otherBtnHide = true
          }
        })
      })
    },
    // 加载组件我的日程
    loadComponentSchedule(dataId) {
      console.log('dataId', dataId)
      this.$bus.$once('async_done', () => {
        this.$nextTick(() => {
          var msgFormData = {}
          var data = JSON.parse(dataId)
          console.log('data', data)
          msgFormData.beginTime = data.beginTime
          msgFormData.endTime = data.endTime
          msgFormData.scheduleStaffId = data.scheduleStaffId
          msgFormData.sourcePage = 'msgBase'
          console.log('555555', msgFormData)
          this.$refs.msgFormPath && this.$refs.msgFormPath.init(msgFormData)
          this.$refs.msgFormView && this.$refs.msgFormView.init(msgFormData)
          // 控制按钮是否隐藏
          if (this.$refs.msgFormPath?.isHide !== undefined) {
            this.$refs.msgFormPath.isHide = false
            this.$refs.msgFormView.isHide = false
          }
          if (this.$refs.msgFormPath?.btnHide !== undefined) {
            this.$refs.msgFormPath.btnHide = true
            this.$refs.msgFormView.btnHide = true
          }
          if (this.$refs.msgFormPath?.otherBtnHide !== undefined) {
            this.$refs.msgFormPath.otherBtnHide = true
            this.$refs.msgFormView.otherBtnHide = true
          }
        })
      })
    },
    // 保存评论
    saveData() {
      const userIds = this.commentFrom.userIds
      if (userIds === undefined || userIds === []) {
        this.msgError(this.$t('请勾选用户'))
        return
      }
      const content = this.commentFrom.content
      if (content === undefined || content === '') {
        this.msgError(this.$t('请填写回复内容'))
        return
      }
      const parent = this.commentList[0]
      this.commentFrom.supId = parent.id
      this.commentFrom.component = parent.component
      this.commentFrom.dataId = parent.dataId
      saveMsgBase(this.commentFrom).then((res) => {
        if (res.code !== 200) {
          this.msgError(res.msg)
        } else {
          const row = {
            content: res.data.content,
            avatar: this.$store.getters.avatar,
            createTime: new Date(),
            createBy: {
              nickName: this.$store.getters.name
            }
          }
          this.commentList.push(row)
          this.commentFrom.content = ''

          this.$nextTick(() => {
            var container = this.$el.querySelector('.comList')
            container.scrollTop = container.scrollHeight
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.message {
  border: 1px solid #ebebeb;
  padding: 10px;
}
.tit {
  border-bottom: 0;
}
.peo {
  border-right: 0;
}
</style>
